<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{{asset('admin/layui/layui/css/layui.css')}}"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>初演示</legend>
</fieldset>

<div class="layui-btn-container">
    <button class="layui-btn demo1">
        下拉菜单
        <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
    <button class="layui-btn layui-btn-primary demo1">
        下拉菜单
        <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
</div>

<div class="layui-inline" style="width: 235px;">
    <input name="" placeholder="在输入框提供一些常用的选项" class="layui-input" id="demo2">
</div>
<div class="layui-inline layui-word-aux layui-font-gray">
    可以绑定任意元素，<a href="javascript:;" class="layui-font-blue" id="demo3">比如这段文字 <i class="layui-icon layui-font-12 layui-icon-down"></i></a>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>高级演示</legend>
</fieldset>

<div class="layui-btn-container">
    <button class="layui-btn" id="demo100">
        无限层级 + 跳转 + 事件 + 自定义模板
    </button>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>自定义事件</legend>
</fieldset>

<div class="layui-btn-container">
    <button class="layui-btn layui-btn-primary" id="demo4">
        hover
        <i class="layui-icon layui-icon-more-vertical layui-font-12"></i>
    </button>
    <button class="layui-btn layui-btn-primary" id="demo5">
        mousedown
        <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
    <button class="layui-btn layui-btn-primary" id="demo6">
        dblclick - 双击
        <i class="layui-icon layui-icon-circle layui-font-12"></i>
    </button>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>右键菜单</legend>
</fieldset>

<div class="layui-bg-gray" style="height: 260px; text-align: center;" id="demo7">
    <span class="layui-font-gray" style="position: relative; top:50%;">在此区域单击鼠标右键</span>
</div>
<button class="layui-btn" style="margin-top: 15px;" lay-demoactive="rightclick">
    开启全局右键菜单
</button>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>点击回调</legend>
</fieldset>
<table class="layui-table">
    <tbody>
    <tr>
        <td>列表 1</td>
        <td><button class="layui-btn layui-btn-sm demolist" data-id="111">更多操作</button></td>
    </tr>
    <tr>
        <td>列表 2</td>
        <td><button class="layui-btn layui-btn-sm demolist" data-id="222">更多操作</button></td>
    </tr>
    <tr>
        <td>列表 3</td>
        <td><button class="layui-btn layui-btn-sm demolist" data-id="333">更多操作</button></td>
    </tr>
    </tbody>
</table>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>重定义风格</legend>
</fieldset>

<div class="layui-btn-container">
    <button class="layui-btn" id="demo8">
        重定义样式
        <i class="layui-icon layui-icon-list layui-font-14"></i>
    </button>
    <style>
        .site-dropdown-demo,
        .site-dropdown-demo .layui-menu{background-color: #000; border: none;}
        .site-dropdown-demo .layui-menu li{color: #fff;}
        .site-dropdown-demo .layui-menu li:hover{background-color: #333;}
    </style>
    <button class="layui-btn" id="demo9">
        重定义内容
        <i class="layui-icon layui-icon-list layui-font-14"></i>
    </button>
</div>


{{--<script src="{{asset('common/dropdown/layui.js')}}" charset="utf-8"></script>--}}
<script src="{{asset('admin/layui/layui/layui.js')}}" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use(['dropdown', 'util', 'layer'], function(){
        var dropdown = layui.dropdown
            ,util = layui.util
            ,layer = layui.layer
            ,$ = layui.jquery;

        //初演示
        dropdown.render({
            elem: '.demo1'
            ,data: [{
                title: 'menu item11'
                ,id: 100
            },{
                title: 'menu item22'
                ,id: 101
            },{
                title: 'menu item33'
                ,id: 102
            }]
            ,click: function(obj){
                layer.tips('点击了：'+ obj.title, this.elem, {tips: [1, '#5FB878']})
            }
        });

        //初演示 - 绑定输入框
        dropdown.render({
            elem: '#demo2'
            ,data: [{
                title: 'menu item 1'
                ,id: 101
            },{
                title: 'menu item 2'
                ,id: 102
            },{
                title: 'menu item 3'
                ,id: 103
            },{
                title: 'menu item 4'
                ,id: 104
            },{
                title: 'menu item 5'
                ,id: 105
            },{
                title: 'menu item 6'
                ,id: 106
            }]
            ,click: function(obj){
                this.elem.val(obj.title);
            }
            ,style: 'width: 235px;'
        });

        //初演示 - 绑定文字
        dropdown.render({
            elem: '#demo3'
            ,data: [{
                title: 'menu item 1'
                ,id: 100
            },{
                title: 'menu item 2'
                ,id: 101
                ,child: [{  //横向子菜单
                    title: 'menu item 2-1'
                    ,id: 1011
                },{
                    title: 'menu item 2-2'
                    ,id: 1012
                }]
            },{
                title: 'menu item 3'
                ,id: 102
            },{
                type: '-' //分割线
            },{
                title: 'menu group'
                ,id: 103
                ,type: 'group' //纵向菜单组
                ,child: [{
                    title: 'menu item 4-1'
                    ,id: 1031
                },{
                    title: 'menu item 4-2'
                    ,id: 1032
                }]
            },{
                type: '-' //分割线
            },{
                title: 'menu item 5'
                ,id: 104
            },{
                title: 'menu item 5'
                ,id: 104
            }]
            ,click: function(obj){
                this.elem.val(obj.title);
            }
        });



        //自定义事件 - hover
        dropdown.render({
            elem: '#demo4'
            ,trigger: 'hover'
            ,data: [{
                title: 'menu item 1'
                ,id: 100
            },{
                title: 'menu item 2'
                ,id: 101
            },{
                title: 'menu item 3'
                ,id: 102
            }]
        });

        //自定义事件 - mousedown
        dropdown.render({
            elem: '#demo5'
            ,trigger: 'mousedown'
            ,data: [{
                title: 'menu item 1'
                ,id: 100
            },{
                title: 'menu item 2'
                ,id: 101
            },{
                title: 'menu item 3'
                ,id: 102
            }]
        });

        //自定义事件 - dblclick
        dropdown.render({
            elem: '#demo6'
            ,trigger: 'dblclick'
            ,data: [{
                title: 'menu item 1'
                ,id: 100
            },{
                title: 'menu item 2'
                ,id: 101
            },{
                title: 'menu item 3'
                ,id: 102
            }]
        });

        //右键菜单
        var inst = dropdown.render({
            elem: '#demo7' //也可绑定到 document，从而重置整个右键
            ,trigger: 'contextmenu' //contextmenu
            ,isAllowSpread: false //禁止菜单组展开收缩
            ,style: 'width: 200px' //定义宽度，默认自适应
            ,id: 'test777' //定义唯一索引
            ,data: [{
                title: 'menu item 1'
                ,id: 'test'
            }, {
                title: 'Printing'
                ,id: 'print'
            },{
                title: 'Reload'
                ,id: 'reload'
            },{type:'-'},{
                title: 'menu item 3'
                ,id: '#3'
                ,child: [{
                    title: 'menu item 3-1'
                    ,id: '#1'
                },{
                    title: 'menu item 3-2'
                    ,id: '#2'
                },{
                    title: 'menu item 3-3'
                    ,id: '#3'
                }]
            },{type:'-'},{
                title: 'menu item 4'
                ,id: ''
            },{
                title: 'menu item 5'
                ,id: '#1'
            },{
                title: 'menu item 6'
                ,id: '#1'
            }]
            ,click: function(obj, othis){
                if(obj.id === 'test'){
                    layer.msg('click');
                } else if(obj.id === 'print'){
                    window.print();
                } else if(obj.id === 'reload'){
                    location.reload();
                }
            }
        });

        //点击回调
        dropdown.render({
            elem: '.demolist'
            ,data: [{
                title: 'item 1'
                ,id: 'aaa'
            }, {
                title: 'item 2'
                ,id: 'bbb'
            }]
            ,click: function(data, othis){
                var elem = $(this.elem)
                    ,listId = elem.data('id'); //表格列表的预埋数据
                layer.msg('得到表格列表的 id：'+ listId +'，下拉菜单 id：'+ data.id);
            }
        });

        //重定义样式
        dropdown.render({
            elem: '#demo8'
            ,data: [{
                title: 'menu item 1'
                ,id: 100
            },{
                title: 'menu item 2'
                ,id: 101
            },{
                title: 'menu item 3'
                ,id: 103
            },{
                title: 'menu item 4'
                ,id: 104
            },{
                title: 'menu item 5'
                ,id: 105
            },{
                title: 'menu item 6'
                ,id: 106
            }]
            ,className: 'site-dropdown-demo'
            ,ready: function(elemPanel, elem){
                layer.msg('定义了一个 className');
            }
        });

        //重定义内容
        dropdown.render({
            elem: '#demo9'
            ,content: ['<div class="layui-tab layui-tab-brief">'
                ,'<ul class="layui-tab-title">'
                ,'<li class="layui-this">Tab header 1</li>'
                ,'<li>Tab header 2</li>'
                ,'<li>Tab header 3</li>'
                ,'</ul>'
                ,'<div class="layui-tab-content">'
                ,'<div class="layui-tab-item layui-text layui-show"><p style="padding-bottom: 10px;">在 content 参数中插入任意的 html 内容，可替代默认的下拉菜单。 从而实现更多有趣的弹出内容。</p><p> 是否发现，dropdown 组件不仅仅只是一个下拉菜单或者右键菜单，它能被赋予许多的想象可能。</p></div>'
                ,'<div class="layui-tab-item">Tab body 2</div>'
                ,'<div class="layui-tab-item">Tab body 3</div>'
                ,'</div>'
                ,'</div>'].join('')
            ,style: 'width: 370px; height: 200px; padding: 0 15px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%);'
            ,ready: function(){
                layui.use('element', function(element){
                    element.render('tab');
                });
            }
        });


        //其他操作
        util.event('lay-demoactive', {
            //全局右键菜单
            rightclick: function(othis){
                if(!othis.data('open')){
                    dropdown.reload('test777', {
                        elem: document //将事件直接绑定到 document
                    });
                    layer.msg('已开启全局右键菜单，请尝试在页面任意处单击右键。')
                    othis.html('取消全局右键菜单');
                    othis.data('open', true);
                } else {
                    dropdown.reload('test777', {
                        elem: '#demo7' //重新绑定到指定元素上
                    });
                    layer.msg('已取消全局右键菜单，恢复默认右键菜单')
                    othis.html('开启全局右键菜单');
                    othis.data('open', false);
                }
            }
        })
    });
</script>


</body>
</html>
